<template>
  <el-dialog :title="!dataForm.id? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="所属公司" prop="companyId">
        <el-select v-model="dataForm.companyId" clearable
          placeholder="请选择" :disabled="dataForm.id !== null"
          @change="companyChange"
        >
          <el-option
            v-for="item in companys"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
            :disabled="item.status !== 1">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属店铺" prop="shopId">
        <el-select v-model="dataForm.shopId" clearable placeholder="请选择" :disabled="dataForm.id !== null">
          <el-option
            v-for="item in shops"
            :key="item.id"
            :label="item.shopName"
            :value="item.id"
            :disabled="item.status !== 1">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" prop="employeeName">
        <el-input v-model="dataForm.employeeName" placeholder="员工姓名" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="员工电话" prop="employeeMobile">
        <el-input v-model="dataForm.employeeMobile" placeholder="员工电话" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录用户名" prop="username">
        <el-input v-model="dataForm.username" placeholder="3-15位的字母,数字,下划线组合" :disabled="dataForm.id !== null" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password" v-if="dataForm.id === null">
        <el-input v-model="dataForm.password" placeholder="6-15位的字母,数字,下划线组合" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" v-else>
        <el-input v-model="dataForm.password" placeholder="填入则修改密码" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" v-if="dataForm.id === null">
        <el-input v-model="dataForm.confirmPassword" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" v-else>
        <el-input v-model="dataForm.confirmPassword" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="dataForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="dataForm.birthday"
          align="right"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :editable="false"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号" prop="idNumber">
        <el-input v-model="dataForm.idNumber" placeholder="身份证号" maxlength="18"></el-input>
      </el-form-item>
      <el-form-item label="住址" prop="address">
        <el-input v-model="dataForm.address" placeholder="住址" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="紧急联系人" prop="emergencyContact">
        <el-input v-model="dataForm.emergencyContact" placeholder="紧急联系人" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
        <el-input v-model="dataForm.emergencyContactPhone" placeholder="紧急联系人电话" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="员工等级" prop="level">
        <el-input v-model="dataForm.level" placeholder="员工等级" maxlength="20"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="disabled" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getShopsByCompany } from '@/utils'
  export default {
    props: {
      companys: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        visible: false,
        disabled: false,
        shops: [],
        dataForm: {
          id: null,
          shopId: null,
          companyId: null,
          employeeName: '',
          employeeMobile: '',
          username: '',
          password: '',
          confirmPassword: '',
          gender: null,
          birthday: null,
          idNumber: null,
          address: null,
          emergencyContact: null,
          emergencyContactPhone: null,
          level: null
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        dataRule: {
          shopId: [{
            required: true,
            message: '请选择所属店铺',
            trigger: 'blur'
          }],
          companyId: [{
            required: true,
            message: '请选择所属公司',
            trigger: 'blur'
          }],
          employeeName: [{
            required: true,
            message: '员工姓名不能为空',
            trigger: 'blur'
          }],
          employeeMobile: [{
            required: true,
            message: '员工电话不能为空',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '登录用户名不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur'
          }],
          confirmPassword: [{
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      init(id) {
        this.dataForm = {
          id: id || null,
          shopId: null,
          companyId: null,
          employeeName: '',
          employeeMobile: '',
          username: '',
          password: '',
          confirmPassword: '',
          gender: null,
          birthday: null,
          idNumber: null,
          address: null,
          emergencyContact: null,
          emergencyContactPhone: null,
          level: null
        }
        this.$nextTick(() => {
          if (this.dataForm.id) {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$http({
              url: this.$http.adornUrl(`/merchant/employee/detail/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({
              data
            }) => {
              loading.close()
              if (data && data.code === 0) {
                this.dataForm.shopId = data.item.shopId;
                this.dataForm.companyId = data.item.companyId;
                this.dataForm.employeeName = data.item.employeeName;
                this.dataForm.employeeMobile = data.item.employeeMobile;
                this.dataForm.username = data.item.username;
                this.dataForm.gender = data.item.gender;
                this.dataForm.birthday = data.item.birthday;
                this.dataForm.idNumber = data.item.idNumber;
                this.dataForm.address = data.item.address;
                this.dataForm.emergencyContact = data.item.emergencyContact;
                this.dataForm.emergencyContactPhone = data.item.emergencyContactPhone;
                this.dataForm.level = data.item.level;
                getShopsByCompany(this.dataForm.companyId,res => {
                  this.shops = res
                });
              }
              this.visible = true
            }).catch(() => {
              loading.close()
            })
          } else {
            this.visible = true
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.disabled = true;
            this.$http({
              url: this.$http.adornUrl(`/merchant/employee/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                id: this.dataForm.id || undefined,
                shopId: this.dataForm.shopId,
                companyId: this.dataForm.companyId,
                employeeName: this.dataForm.employeeName,
                employeeMobile: this.dataForm.employeeMobile,
                username: this.dataForm.username,
                password: this.dataForm.password,
                confirmPassword: this.dataForm.confirmPassword,
                gender: this.dataForm.gender,
                birthday: this.dataForm.birthday,
                idNumber: this.dataForm.idNumber,
                address: this.dataForm.address,
                emergencyContact: this.dataForm.emergencyContact,
                emergencyContactPhone: this.dataForm.emergencyContactPhone,
                level: this.dataForm.level
              })
            }).then(({
              data
            }) => {
              this.disabled = false;
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit('refreshDataList');
                  }
                })
              } else {
                this.$message.error(data.msg);
              }
            })
          }
        })
      },
      // 公司选择事件
      companyChange(companyId){
        this.dataForm.shopId = null
        getShopsByCompany(companyId,res => {
          this.shops = res
        });
      }
    }
  }
</script>
